<template>
  <div>
         <h2>My Heroes</h2>
    <ul class="heroes">
        <li v-for="item in items"
          :class="{selected: item === selectedItem}"
         @click="goToDetail(item)">
         <span class="badge">{{item.id}}</span> {{item.name}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "VueDemo",
  data() {
    return {
      selectedItem: "",
      items: [
        {
          id: 1,
          name: "计算属性",
          router: "cp"
        },
        {
          id: 2,
          name: "观察者",
          router: "watch"
        },
        {
          id: 3,
          name: "vue中的属性绑定",
          router: "property"
        },
        {
          id: 4,
          name: "vue mixins",
          router: "mixins"
        },
        {
          id: 5,
          name: "vue vuex",
          router: 'movie'
        },
        {
          id: 6,
          name: "v-if",
          router: 'vif'
        },
        {
          id: 6,
          name: "v-form",
          router: 'vform'
        },
        {
          id: 7,
          name: "v-slotScope",
          router: 'slotScope'
        },
        {
          id: 8,
          name: "on",
          router: 'on'
        }
      ]
    };
  },
  //   computed: {
  //     ...mapState({
  //       heroes: state => state.heroes.heroes
  //     })
  //   },
  methods: {
    goToDetail: function(item) {
        this.selectedItem = item;
      this.$router.push({ path: `/${item.router}` });
    }
  }
};
</script>
<style scoped>
.selected {
  background-color: #cfd8dc !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #eee;
  margin: 0.5em;
  padding: 0.3em 0;
  height: 1.6em;
  border-radius: 4px;
  text-align: left;
}
.heroes li:hover {
  color: #607d8b;
  background-color: #ddd;
  left: 0.1em;
}
.heroes li.selected:hover {
  background-color: #bbd8dc !important;
  color: white;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607d8b;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: 0.8em;
  border-radius: 4px 0 0 4px;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
</style>


